<template>
  <section class="ling-top-text have_task_wrap">
    <h2>已接任务</h2>

    <div v-if="userJobList && userJobList.totalElements>0">
      <div class="result-list" v-for="(item,index) in userJobList.content" :key="index">
        <div class="result-list-items ling-flex">
          <div class="van-ellipsis result-list-tit">{{item.jobResponse.title}}</div>
          <span>{{item.userJobStatusDesc}}</span>
        </div>
        <div class="result-list-items">
          <div class="result-list-jobs van-ellipsis">
            <img width="20" :src="jobsImage" />{{item.jobResponse.industryName}}／{{item.jobResponse.positionName}}
          </div>
          <time>{{item.userJobCreateTime}} 抢单</time>
        </div>
        <div class="result-list-items">
          <div class="van-ellipsis result-list-company">
            <img width="20" :src="jobsImage" />{{item.jobResponse.description}}
          </div>
          <span class="money">{{item.jobResponse.budgetInfo}}</span>
        </div>
        <div class="check-btn ling-linearButton" @click="$router.push(`haveTaskDetail/${item.userJobId}/true`)">查看</div>
      </div>
    </div>
    <div v-else class="no-task">暂无相关任务</div>
  </section>
</template>

<script>
import jobsImage from '@/assets/images/jobs.png'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
export default {
  name: 'haveTaskPage',
  data() {
    return {
      jobsImage
    }
  },
  components: {},
  created() {
    this.getUserJobList()
    // console.log(this.userJobList, 'userJobList')
  },
  computed: {
    ...mapState(['userJobCount', 'userJobList'])
  },
  methods: {
    ...mapActions(['getUserJobList'])
  }
}
</script>

<style lang='less' scoped>
.have_task_wrap {
  background: #f5f5f5;
  h2 {
    margin-bottom: 9px;
    border: none;
  }
  .result-list {
    background: white;
    padding: 5px 20px;
    margin-bottom: 10px;
    position: relative;
    .result-list-items {
      display: flex;
      line-height: 30px;
      .result-list-tit {
        width: 180px;
        color: #333;
        font-size: 14px;
      }
      span {
        font-size: 12px;
        color: #333333;
      }
      .money {
        font-size: 14px;
        color: #333333;
        .filter-items-icons {
          font-size: 10px;
          color: #666666;
          position: relative;
          right: -3px;
        }
      }
      .result-list-jobs,
      .result-list-company {
        width: 135px;
        color: #999;
        font-size: 10px;
        img {
          margin-right: 10px;
        }
      }
      time {
        font-size: 10px;
        color: #999999;
      }
    }
    .check-btn {
      width: 60px;
      height: 30px;
      line-height: 30px;
      box-shadow: 0px 8px 20px rgba(122, 197, 239, 0.2);
      color: white;
      font-size: 12px;
      position: absolute;
      right: 18px;
      bottom: 10px;
    }
  }
}
</style>
